<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" status-icon :rules="loginRules" label-width="80px" class="login-form" auto-complete="on">
      <el-form-item label="账号" prop="username">
        <el-input v-model="loginForm.username" placeholder="username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" placeholder="password"></el-input>
      </el-form-item>

      <el-form-item label="记住密码">
        <el-switch v-model="loginForm.remeberMe"></el-switch>
      </el-form-item>
      <el-form-item>
      <el-button :loading="loading" type="primary" style=" width: 80%; margin-bottom: 30px; " @click.native.prevent="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

  export default {
    name: 'homePage',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (value == null||value=='') {
          callback(new Error('请输入正确的管理员用户名'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('管理员密码长度应大于6'))
        } else {
          callback()
        }
      }
      return {
        loginForm: {
          username: '',
          password: '',
          remeberMe: false
        },
        loginRules: {
          username: [{ required: true, trigger: 'blur', validator: validateUsername }],
          password: [{ required: true, trigger: 'blur', validator: validatePassword }]
        },
        passwordType: 'password',
        loading: false,
        login_back: require("../../../static/img/login-back.jpg")
      }
    },
    watch: {
      $route: {//监控路由变化
        handler: function(route) {
          //重定向
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }

    },
    methods: {
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid && !this.loading) {
            this.loading = true
            this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
              this.loading = false
                //将当前路由重定向
              this.$router.push({ path: this.redirect || '/' })
            }).catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.errmsg
              })
              this.loading = false
            })
          } else {
            return false
          }
        })
      }
    }


  }
</script>
<style type="text/css">

  .login-form {
    margin-top: 100px;
    padding: 74px 38px;
    margin-left: 075%;
    margin-right: 3%;
    height: 25%;
    border-radius: 17px;
    background-color: #484e7ccf;
    color: #ffffff;
    opacity: 0.7;
  }

  .el-form-item__label {
    color: #ffffff;
    font-weight: bold;
  }

  .el-switch.is-checked .el-switch__core {
    border-color: #070709;
    background-color: #070709;
  }

  .login-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background-image: url("../../../static/img/login-back.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
  }

  body {
    margin: 0px;
  }
  .el-button--primary {

    color: #FFF;
    background-color: #07123b;
    border-color: #07123b;
  }
  .el-button--primary.is-active, .el-button--primary:active,.el-button--primary:focus, .el-button--primary:hover  {


    background: rgb(169, 162, 172);;
    border-color: rgb(169, 162, 172);;
    color: #FFF;
  }

  .el-input {
    width:80%;
  }

</style>

